<template>
	<scroll-view scroll-y class="flex-1 overflow-auto fill-width-height home_container">
		<uv-cell-group class="fill-width flex-unset" v-for="(typeItem,index) in typeDataList" :key="index">
			<template v-if="typeItem.cardtype === 'carousel'">
				<view class="carousel_image d-flex align-center justify-center card_content">
					<uv-swiper :list="getSwiperListByDetailList(typeItem.detailList)" :vertical="false"
						indicatorMode="dot" circular indicator :height="210"
						@click="(index) => viewsSwiper(index, typeItem.detailList)"
						>
					</uv-swiper>
				</view>
			</template>
			
			<template v-if="typeItem.cardtype === 'icon'">
				<view class="fill-width card_content card_content_icon">
					<view class="flex-row justify-center align-center uv-grid icon_contain fill-width" style="gap: 20px;padding: 10px 0;">
						<uv-icon
							:name="'plus-circle'" 
							size="30"
							bold
							:label="'每日更新'"
							labelPos="bottom"
							space="8px"
							labelColor="#666"
							:color="'#e45656'" 
							class="justify-center app_icon flex-1"
							@click="goToPage('/pages/features/lastUpdate/index')"
						>
						</uv-icon>
						<uv-icon
							:name="'order'" 
							size="30"
							bold
							:label="'最热表情'"
							labelPos="bottom"
							space="8px"
							labelColor="#666"
							:color="'#f1a532'" 
							class="justify-center app_icon flex-1"
							@click="goToPage('/pages/features/hotEmoji/index')"
						>
						</uv-icon>
						<uv-icon
							:name="'chat'" 
							size="30"
							bold
							:label="'公众号'"
							labelPos="bottom"
							space="8px"
							labelColor="#666"
							:color="'#53c21d'" 
							class="justify-center app_icon flex-1"
							@click="goToPage('/pages/features/wechatOfficial/index')"
						>
						</uv-icon>
						
						<button 
						    class="share-button" 
						    open-type="share"
						    @click="handleShareClick"
						  >
						    <uv-icon 
						      :name="'share'" 
						      size="30"
						      bold
						      :label="'分享好友'"
						      labelPos="bottom"
						      space="8px"
						      labelColor="#666"
						      :color="'#ffe57c'" 
						      class="justify-center app_icon flex-1"
						    >
						      分享好友
						    </uv-icon>
						</button>
						
					</view>
				</view>
			</template>
	
			<template v-if="typeItem.cardtype === 'single'">
				<uv-cell @click="clickCell(typeItem)">
					<template v-slot:icon>
						<view class="leftBorder"></view>
					</template>
					<template v-slot:right-icon>
						<view class="flex-row justify-center align-center">
							<view class="circelSpan">更多</view>
							<uv-icon size="25rpx" name="arrow-right"></uv-icon>
						</view>
					</template>
					<template v-slot:title>
						<text class="font-bold">{{ typeItem.title }}</text>
					</template>
				</uv-cell>
				<view class="fill-width card_content">
					<uv-grid :col="getColSpan(typeItem.colspan)" class="fill-width">
						<uv-grid-item v-for="(item,index) in typeItem.detailList" :key="index"
							:customStyle="{ padding: '6px' }" @click="viewsDetails(item,false,typeItem.detailList)">
							<uv-image 
								mode="widthFix" 
								radius="10"
								width="100%" 
								:lazy-load="true"
								:showMenuByLongpress="false"
								:src="$getPreviewPath(item.imgfileid)"
							>
								<template v-slot:loading>
									<uv-loading-icon color="#999"></uv-loading-icon>
								</template>
							</uv-image>
						</uv-grid-item>
					</uv-grid>
				</view>
			</template>
	
			<template v-if="typeItem.cardtype === 'coll'">
				<uv-cell @click="clickCell(typeItem)">
					<template v-slot:icon>
						<view class="leftBorder"></view>
					</template>
					<template v-slot:right-icon>
						<view class="flex-row justify-center align-center">
							<view class="circelSpan">更多</view>
							<uv-icon size="25rpx" name="arrow-right"></uv-icon>
						</view>
					</template>
					<template v-slot:title>
						<text class="font-bold">{{ typeItem.title }}</text>
					</template>
				</uv-cell>
				<view class="fill-width card_content">
					<uv-grid :col="1" class="fill-width">
						<view class="fill-width" style="padding: 10px;">
							<uv-grid-item v-for="(item,index) in typeItem.detailList" :key="index"
								:customStyle="{padding: '10px 6px'}" @click="viewsDetails(item, true)">
								<view class="fill-width flex-row">
									<view style="width: 40%;">
										<uv-image mode="widthFix" radius="10" width="100%"
											:showMenuByLongpress="false" :src="viewsCollImg(item)"
											:lazy-load="true"
										>
											<template v-slot:loading>
												<uv-loading-icon color="#999"></uv-loading-icon>
											</template>
										</uv-image>
									</view>
									<view style="width: 25rpx;"></view>
									<view class="fontDetails flex-1 flex-col justify-center ">
										<view class="big-title">{{ item.collname }}</view>
										<view class="min-title">{{ item.colldescribe }}</view>
									</view>
								</view>
							</uv-grid-item>
						</view>
					</uv-grid>
				</view>
			</template>
		</uv-cell-group>
		<view style="height:20px;"></view>
	</scroll-view>
</template>

<script>
	import {
		getPage,
		getDetailsList,
		getCollectList
	} from '@/api/home'
	import {
		useCommonStore
	} from '@/store/common'
	const commonStore = useCommonStore()
	import sharePages from '@/framework/plugins/sharePages'
	import { clearImageListCache,setImageListCache } from '@/hooks/common'
	export default {
		mixins: [sharePages],
		props: {
			typeDataList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				keyword: '',
				current: 0,
				shareTitle: '灰灰的图库',
				sharethumb: '/static/other/share_home.jpg'
			}
		},
		methods: {
			addToFavorites() {

			},
			goToPage(url) {
				uni.navigateTo({
					url: url
				});
			},
			getColSpan(colspan) {
				return colspan ? colspan : 4
			},
			viewsSwiper(index, list) {
				const item = list[index]
				this.viewsDetails(item,false,list)
			},
			viewsDetails(item, iscoll,list) {
				if (iscoll) {
					const encodedId = encodeURIComponent(item.id);
					this.goToPage('/pages/collection/collectDetailList/index?id=' + encodedId + '&type=collection')
					return
				}
				clearImageListCache()
				const imageList = list?.map(item => item.imgfileid) || []
				setImageListCache(imageList)
				const encodedId = encodeURIComponent(item.imgfileid);
				this.goToPage('/pages/viewdetail/index?fileId=' + encodedId)
			},
			clickCell() {
				uni.switchTab({
					url: '/pages/gridList/index'
				});
			},
			getSwiperListByDetailList(detailList) {
				const baseUrl = this.$config.replacehUrl('imgStore/openApi/previewByBussId?bussid=')
				const list = detailList?.map(item => {
					if(item?.imgfileid?.startsWith('http')){
						return item.imgfileid
					}
					return `${baseUrl}${item.imgfileid}`
				})
				return list
			},
			viewsCollImg(row) {
				return row?.coverurl?.startsWith('http') ? row?.coverurl : this.$config.replacehUrl(`imgStore/openApi/viewFile?fileName=${row.coverurl}`)
			},
			
			// 添加分享功能
			shareToFriend() {
				// 显示分享菜单
				uni.showShareMenu({
					withShareTicket: true,
					success: () => {
						console.log('显示分享菜单成功');
					},
					fail: (err) => {
						console.error('显示分享菜单失败:', err);
						uni.showToast({
							title: '分享失败，请稍后再试',
							icon: 'none'
						});
					}
				});
				
			},
		},
		mounted() {
		},
		onLoad() {
		},
	}
</script>

<style lang="scss" scoped>
	.home_container{
		 margin: 0 auto;
		.font-bold {
			font-weight: bold;
		}
		
		.circelSpan {
			color: #999;
			font-size: 14px;
			margin-right: 5px;
			cursor: pointer;
		}
		
		.uv-icon.uv-icon--right {
			margin-top: 3px;
			cursor: pointer;
		}
		
		.big-title {
			font-weight: bold;
			line-height: 50rpx;
			font-size: 14px;
		}
		
		.min-title {
			color: #d4d4d4;
			font-size: 13px;
			line-height: 50rpx;
		}
		
		.leftBorder {
			width: 5px;
			background: #FF9800;
			height: 15px;
			border-radius: 10px;
			margin-right: 2px;
		}
		
		.card_content {
			min-height: 100px;
			// margin: 0 15px;
			background: rgba(255, 255, 255, 0.85);
			-webkit-backdrop-filter: blur(20px) saturate(180%);
			backdrop-filter: blur(20px) saturate(180%);
			border-radius: 16px;
			border: 1px solid rgba(255, 255, 255, 0.3);
			box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
			padding: 16px;
			width: calc(100% - 32px);
		}
		.card_content_icon{
			margin: 15px 0;padding: 0 16px;height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 5px;
			:deep(.uv-grid){
				min-height: 80px !important;
			}
		}
		
		:deep(.uni-scroll-view) {
		  scrollbar-width: none; 
		  -ms-overflow-style: none; 
		}
		
		:deep(.hide-scrollbar::-webkit-scrollbar) {
		  display: none; 
		}
	}
	.share-button{
		background-color: unset !important;
	}
	.share-button:after {
	    border: unset !important;
	}
</style>